<template>
	<view>
		<u-navbar :border-bottom="false" :background="{backgroundColor: '#FFFFFF'}" title-color="#333333"
			:custom-back="goback" back-icon-color='#333333'>
			<u-search placeholder="请输入公司/城市/持有人" v-model="keyword" :disabled="true" @click="clickSearchButton"
				@custom="clickSearchButton"></u-search>
		</u-navbar>
		<view class="homepage-view">
			<view id="container" :prop="option" :change:prop="amap.updateAmap"></view>
			<view class="homepage-top-view">
				<u-dropdown :close-on-click-mask="true" ref="uDropdown" activeColor="#0071C5" :borderBottom="false"
					@open="uDropdownOpen">
					<u-dropdown-item title="区域">
						<view class="slot-content">
							<view class="item-box">
								<view class="item" :class="[item.active ? 'active' : '']" @tap="tagClick(index)"
									v-for="(item, index) in dropdownList" :key="index">
									{{item.label}}
								</view>
							</view>
							<u-button type="primary" @click="closeDropdown">确定</u-button>
						</view>
					</u-dropdown-item>
					<u-dropdown-item title="公司">
						<view class="slot-content">
							<view class="item-box">
								<view class="item" :class="[item.active ? 'active' : '']" @tap="companyTagClick(index)"
									v-for="(item, index) in companyDropdownList" :key="index">
									{{item.label}}
								</view>
							</view>
							<u-button type="primary" @click="companyCloseDropdown">确定</u-button>
						</view>
					</u-dropdown-item>
					<u-dropdown-item title="持有类">
						<view class="slot-content">
							<view class="item-box">
								<view class="item" :class="[item.active ? 'active' : '']" @tap="holdTagClick(index)"
									v-for="(item, index) in holdDropdownList" :key="index">
									{{item.label}}
								</view>
							</view>
							<u-button type="primary" @click="holdCloseDropdown">确定</u-button>
						</view>
					</u-dropdown-item>
					<u-dropdown-item title="更多">
						<view class="slot-content">
							<view class="item-box-2">
								<view v-for="(item1, index1) in moreDropdownList" :key="index1">
									<view class="item-box-more">
										<view class="item" :class="[item.active ? 'active' : '']"
											@tap="moreTagClick(index1, index)" v-for="(item, index) in item1"
											:key="index">
											{{item.label}}
										</view>
									</view>
								</view>
							</view>
							<view class="more-button">
								<u-button :throttleTime="0" @click="moreResetDropdown" class="more-button-1">重置
								</u-button>
								<u-button :throttleTime="0" type="primary" @click="moreCloseDropdown"
									class="more-button-2">确定
								</u-button>
							</view>
						</view>
					</u-dropdown-item>
				</u-dropdown>
			</view>
			<view class="homepage-bottom-view" @touchstart="touchstart" @touchend="touchend" :animation="animationData">
				<view class="homepage-bottom-top-view">
					<view class="homepage-bottom-top-center-view">

					</view>
				</view>
				<u-tabs-swiper active-color="#0071C5" inactive-color="#999999" :list="tabList" :current="tabCurrent"
					@change="change" :is-scroll="false">

				</u-tabs-swiper>
				<swiper class="homepage-swiper-view" :current="swiperCurrent" :disable-touch="true" duration="0">
					<swiper-item>
						<region-statis :level="1" :provinceIds="provinceIds"></region-statis>
					</swiper-item>
					<swiper-item>
						<u-tabs-swiper active-color="#0071C5" inactive-color="#999999" :list="tabList1"
							:current="tabCurrent1" @change="change1" :is-scroll="false">
						</u-tabs-swiper>
						<swiper style="height: 980rpx;" :current="swiperCurrent1" :disable-touch="true" duration="0">
							<swiper-item>
								<asset-status-report :level="1" :provinceIds="provinceIds"></asset-status-report>
							</swiper-item>
							<swiper-item>
								<value-report :level="1" :provinceIds="provinceIds"></value-report>
							</swiper-item>
							<swiper-item>
								<asset-list :level="1" :provinceIds="provinceIds"></asset-list>
							</swiper-item>
						</swiper>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<u-tabbar v-model="current" :list="list" active-color="#0071C5" inactive-color="#D2D3D3"
			:before-switch="beforeSwitch"></u-tabbar>
	</view>
</template>

<script>
	import regionStatis from '../report/regionStatis.vue'
	import assetStatusReport from '../report/assetStatusReport.vue'
	import valueReport from '../report/valueReport.vue'
	import assetList from '../report/assetList.vue'

	export default {
		components: {
			regionStatis,
			assetStatusReport,
			valueReport,
			assetList
		},
		onLoad() {
			var animation = uni.createAnimation({
				duration: 500,
				timingFunction: 'ease-out'
			})
			this.animation = animation

			setTimeout(function() {
				this.$u.api.getProvinceList({
					level: 1
				}).then(res => {
					for (var i = 0; i < res.length; i++) {
						var dic = res[i]
						var dict = {
							label: dic['name'],
							pkid: dic['pkid'],
							active: false
						}
						var a = {
							adCode: dic['adCode'],
							totalRegisterPrice: dic['totalRegisterPrice'],
							totalFairPrice: dic['totalFairPrice']
						}
						this.moneyArray.push(a)
						this.dropdownList.push(dict)
					}
					for (var i = 0; i < res.length; i++) {
						var dic = res[i]
						var dict = {
							label: dic['name'],
							pkid: dic['pkid'],
							active: false
						}
						this.realDropdownList.push(dict)
					}
					this.option = {
						type: '1',
						position: [],
						info: res,
						moneyArray: this.moneyArray
					}
				}).catch(err => {
					console.log(err)
				})

				this.$u.api.getCompanyList().then(res => {
					for (var i = 0; i < res.length; i++) {
						var dic = res[i]
						var dict = {
							label: dic['name'],
							companyId: dic['companyId'],
							active: false
						}
						this.companyDropdownList.push(dict)
					}
					for (var i = 0; i < res.length; i++) {
						var dic = res[i]
						var dict = {
							label: dic['name'],
							companyId: dic['companyId'],
							active: false
						}
						this.companyRealDropdownList.push(dict)
					}
				}).catch(err => {
					console.log(err)
				})
			}.bind(this), 3000)
		},
		data() {
			return {
				option: {
					type: '',
					position: [],
					info: [],
					moneyArray: []
				},
				moneyArray: [],
				keyword: '',
				dropdownList: [{
					label: '不限',
					active: true
				}],
				realDropdownList: [{
					label: '不限',
					active: true
				}],
				companyDropdownList: [{
					label: '不限',
					active: true
				}],
				companyRealDropdownList: [{
					label: '不限',
					active: true
				}],
				holdDropdownList: [{
					label: '不限',
					active: true
				}, {
					label: '公司持有',
					active: false
				}, {
					label: '个人持有',
					active: false
				}],
				holdRealDropdownList: [{
					label: '不限',
					active: true
				}, {
					label: '公司持有',
					active: false
				}, {
					label: '个人持有',
					active: false
				}],
				moreDropdownList: [
					[{
						label: '不限',
						active: true
					}, {
						label: '房屋建筑',
						active: false
					}, {
						label: '土地',
						active: false
					}],
					[{
						label: '使用',
						active: false
					}, {
						label: '闲置',
						active: false
					}, {
						label: '出租',
						active: false
					}, {
						label: '售卖',
						active: false
					}, {
						label: '抵押',
						active: false
					}],
					[{
						label: '全部',
						active: true
					}, {
						label: '增值',
						active: false
					}, {
						label: '贬值',
						active: false
					}],
					[{
						label: '10%以下',
						active: false
					}, {
						label: '10-20%',
						active: false
					}, {
						label: '20-30%',
						active: false
					}, {
						label: '40-50%',
						active: false
					}, {
						label: '50%以上',
						active: false
					}]
				],
				moreRealDropdownList: [
					[{
						label: '不限',
						active: true
					}, {
						label: '房屋建筑',
						active: false
					}, {
						label: '土地',
						active: false
					}],
					[{
						label: '使用',
						active: false
					}, {
						label: '闲置',
						active: false
					}, {
						label: '出租',
						active: false
					}, {
						label: '售卖',
						active: false
					}, {
						label: '抵押',
						active: false
					}],
					[{
						label: '全部',
						active: true
					}, {
						label: '增值',
						active: false
					}, {
						label: '贬值',
						active: false
					}],
					[{
						label: '10%以下',
						active: false
					}, {
						label: '10-20%',
						active: false
					}, {
						label: '20-30%',
						active: false
					}, {
						label: '40-50%',
						active: false
					}, {
						label: '50%以上',
						active: false
					}]
				],
				list: [{
						text: '首页',
						iconPath: "/static/img/property/home.png",
						selectedIconPath: "/static/img/property/select_home.png"
					},
					{
						text: '应用',
						iconPath: "/static/img/property/application.png",
						selectedIconPath: "/static/img/property/select_application.png"
					},
					{
						text: '我的',
						iconPath: "/static/img/property/mine.png",
						selectedIconPath: "/static/img/property/select_mine.png"
					}
				],

				tabList1: [{
						name: '资产状态'
					},
					{
						name: '价值'
					},
					// {
					//   name: '房屋收益'
					// },
					{
						name: '资产详情'
					}
				],
				tabCurrent1: 0,
				swiperCurrent1: 0,
				current: 0,
				animationData: {},
				tabList: [{
						name: '资产区域分布统计'
					},
					{
						name: '资产数据统计分析'
					}
				],
				tabCurrent: 0,
				swiperCurrent: 0,
				startData: {
					clientX: 0,
					clientY: 0
				},
				provinceIds: []
			}
		},
		methods: {
			SetPostion(e) {
				this.option = {
					type: '2',
					position: [parseFloat(e.lgt), parseFloat(e.lat)],
					info: Math.random(),
					moneyArray: this.moneyArray
				}
			},
			goback() {
				uni.navigateBack({
					delta: 100
				})
			},
			beforeSwitch(index) {
				if (index == 0) {
					return false
				} else if (index == 1) {
					this.$u.route({
						url: 'pages/work/apply/property/application/application',
						animationType: 'fade-in'
					})
					return false
				} else {
					this.$u.route({
						url: 'pages/work/apply/property/mine/mine',
						animationType: 'fade-in'
					})
					return false
				}
			},
			clickSearchButton() {
				this.$u.route({
					url: 'pages/work/apply/property/homepage/search',
					params: {
						keyword: this.keyword
					}
				})
			},
			change1(index) {
				this.tabCurrent1 = index
				this.swiperCurrent1 = index
			},
			change(index) {
				this.animation.height('50vh').step()
				this.animationData = this.animation.export()
				this.tabCurrent = index
				this.swiperCurrent = index
			},
			touchstart(e) {
				this.startData.clientX = e.changedTouches[0].clientX
				this.startData.clientY = e.changedTouches[0].clientY
			},
			touchend(e) {
				const subX = e.changedTouches[0].clientX - this.startData.clientX
				const subY = e.changedTouches[0].clientY - this.startData.clientY
				if (subY > 50) {
					this.animation.height('100rpx').step()
					this.animationData = this.animation.export()
				} else if (subY < -50) {
					this.animation.height('50vh').step()
					this.animationData = this.animation.export()
				}
			},
			goToSearch() {
				var a = this.realDropdownList[0]
				var array = []
				if (!a.active) {
					for (var i = 1; i < this.realDropdownList.length; i++) {
						if (this.realDropdownList[i].active) {
							array.push(this.realDropdownList[i].pkid)
						}
					}
				}

				var b = this.companyRealDropdownList[0]
				var companyArray = []
				if (!b.active) {
					for (var i = 1; i < this.companyRealDropdownList.length; i++) {
						if (this.companyRealDropdownList[i].active) {
							companyArray.push(this.companyRealDropdownList[i].companyId)
						}
					}
				}

				var c = ''
				if (this.holdRealDropdownList[1].active) {
					c = 1
				}
				if (this.holdRealDropdownList[2].active) {
					c = 2
				}

				var d = []
				if (this.moreRealDropdownList[1][0].active) {
					d.push('1')
				}
				if (this.moreRealDropdownList[1][1].active) {
					d.push('2')
				}
				if (this.moreRealDropdownList[1][2].active) {
					d.push('3')
				}
				if (this.moreRealDropdownList[1][3].active) {
					d.push('4')
				}
				if (this.moreRealDropdownList[1][4].active) {
					d.push('5')
				}

				var e = ''
				if (this.moreRealDropdownList[2][1].active) {
					e = 1
				}
				if (this.moreRealDropdownList[2][2].active) {
					e = 2
				}

				var minValue = 0
				var maxValue = 100
				if (this.moreRealDropdownList[3][0].active) {
					var minValue = 0
					var maxValue = 10
				}
				if (this.moreRealDropdownList[3][1].active) {
					var minValue = 10
					var maxValue = 20
				}
				if (this.moreRealDropdownList[3][2].active) {
					var minValue = 20
					var maxValue = 30
				}
				if (this.moreRealDropdownList[3][3].active) {
					var minValue = 40
					var maxValue = 50
				}
				if (this.moreRealDropdownList[3][4].active) {
					var minValue = 50
					var maxValue = 100
				}

				var f = ''
				if (this.moreRealDropdownList[0][1].active) {
					f = 1
				}
				if (this.moreRealDropdownList[0][2].active) {
					f = 2
				}
				this.provinceIds = array
				this.$u.api.getProvinceList({
					level: 1,
					provinceIds: array,
					companyIds: companyArray,
					holdType: c,
					usages: d,
					valueType: e,
					minValue: minValue,
					maxValue: maxValue,
					immovableType: f,
					text: this.keyword
				}).then(res => {
					this.option = {
						type: '1',
						position: [],
						info: res,
						moneyArray: this.moneyArray
					}
				}).catch(err => {
					console.log(err)
				})
				this.$refs.uDropdown.close()
			},
			closeDropdown() {
				for (var i = 0; i < this.dropdownList.length; i++) {
					var a = this.realDropdownList[i]
					var b = this.dropdownList[i]
					a.active = b.active
				}
				this.goToSearch()
			},
			companyCloseDropdown() {
				for (var i = 0; i < this.companyDropdownList.length; i++) {
					var a = this.companyRealDropdownList[i]
					var b = this.companyDropdownList[i]
					a.active = b.active
				}
				this.goToSearch()
			},
			holdCloseDropdown() {
				for (var i = 0; i < this.holdDropdownList.length; i++) {
					var a = this.holdRealDropdownList[i]
					var b = this.holdDropdownList[i]
					a.active = b.active
				}
				this.goToSearch()
			},
			moreCloseDropdown() {
				for (var i = 0; i < this.moreDropdownList.length; i++) {
					for (var j = 0; j < this.moreDropdownList[i].length; j++) {
						var a = this.moreRealDropdownList[i][j]
						var b = this.moreDropdownList[i][j]
						a.active = b.active
					}
				}
				this.goToSearch()
			},
			moreResetDropdown() {
				for (var i = 0; i < this.moreDropdownList[0].length; i++) {
					if (i == 0) {
						this.moreDropdownList[0][i].active = true
					} else {
						this.moreDropdownList[0][i].active = false
					}
				}
				for (var i = 0; i < this.moreDropdownList[1].length; i++) {
					this.moreDropdownList[1][i].active = false
				}
				for (var i = 0; i < this.moreDropdownList[2].length; i++) {
					if (i == 0) {
						this.moreDropdownList[2][i].active = true
					} else {
						this.moreDropdownList[2][i].active = false
					}
				}
				for (var i = 0; i < this.moreDropdownList[3].length; i++) {
					this.moreDropdownList[3][i].active = false
				}
			},
			uDropdownOpen(e) {
				if (e == 0) {
					for (var i = 0; i < this.realDropdownList.length; i++) {
						var a = this.dropdownList[i]
						var b = this.realDropdownList[i]
						a.active = b.active
					}
				} else if (e == 1) {
					for (var i = 0; i < this.companyRealDropdownList.length; i++) {
						var a = this.companyDropdownList[i]
						var b = this.companyRealDropdownList[i]
						a.active = b.active
					}
				} else if (e == 2) {
					for (var i = 0; i < this.holdRealDropdownList.length; i++) {
						var a = this.holdDropdownList[i]
						var b = this.holdRealDropdownList[i]
						a.active = b.active
					}
				} else if (e == 3) {
					for (var i = 0; i < this.moreRealDropdownList.length; i++) {
						for (var j = 0; j < this.moreRealDropdownList[i].length; j++) {
							var a = this.moreDropdownList[i][j]
							var b = this.moreRealDropdownList[i][j]
							a.active = b.active
						}
					}
				}
			},
			tagClick(index) {
				if (this.dropdownList[index].label == "不限") {
					if (this.dropdownList[0].active == false) {
						this.dropdownList[0].active = true
						for (var i = 1; i < this.dropdownList.length; i++) {
							this.dropdownList[i].active = false
						}
					}
				} else {
					this.dropdownList[index].active = !this.dropdownList[index].active

					var all = true
					for (var i = 1; i < this.dropdownList.length; i++) {
						if (this.dropdownList[i].active == true) {
							all = false
						}
					}
					this.dropdownList[0].active = all
				}
			},
			companyTagClick(index) {
				if (this.companyDropdownList[index].label == "不限") {
					if (this.companyDropdownList[0].active == false) {
						this.companyDropdownList[0].active = true
						for (var i = 1; i < this.companyDropdownList.length; i++) {
							this.companyDropdownList[i].active = false
						}
					}
				} else {
					this.companyDropdownList[index].active = !this.companyDropdownList[index].active

					var all = true
					for (var i = 1; i < this.companyDropdownList.length; i++) {
						if (this.companyDropdownList[i].active == true) {
							all = false
						}
					}
					this.companyDropdownList[0].active = all
				}
			},
			holdTagClick(index) {
				if (!this.holdDropdownList[index].active) {
					for (var i = 0; i < this.holdDropdownList.length; i++) {
						this.holdDropdownList[i].active = false
					}
					this.holdDropdownList[index].active = true
				}
			},
			moreTagClick(index1, index2) {
				if (index1 == 0) {
					if (!this.moreDropdownList[0][index2].active) {
						for (var i = 0; i < this.moreDropdownList[0].length; i++) {
							this.moreDropdownList[0][i].active = false
						}
						this.moreDropdownList[0][index2].active = true
					}
				} else if (index1 == 1) {
					this.moreDropdownList[index1][index2].active = !this.moreDropdownList[index1][index2].active
				} else if (index1 == 2) {
					if (!this.moreDropdownList[2][index2].active) {
						for (var i = 0; i < this.moreDropdownList[2].length; i++) {
							this.moreDropdownList[2][i].active = false
						}
						this.moreDropdownList[2][index2].active = true
						for (var i = 0; i < this.moreDropdownList[3].length; i++) {
							this.moreDropdownList[3][i].active = false
						}
					}
				} else {
					if (!this.moreDropdownList[2][0].active) {
						if (!this.moreDropdownList[3][index2].active) {
							for (var i = 0; i < this.moreDropdownList[3].length; i++) {
								this.moreDropdownList[3][i].active = false
							}
							this.moreDropdownList[3][index2].active = true
						}
					}
				}
			}
		}
	}
</script>

<script module="amap" lang="renderjs">
	let map = null
	let distCluster = null
	export default {
		mounted() {
			var script1 = document.createElement('script')
			script1.type = 'text/javascript'
			script1.src =
				'https://webapi.amap.com/maps?v=1.4.15&key=adc7dabbd24ed354922eba890c2594dc'
			script1.onload = this.initAMap.bind(this)
			document.body.appendChild(script1)

			setTimeout(function() {
				var script2 = document.createElement('script')
				script2.type = 'text/javascript'
				script2.src = 'https://webapi.amap.com/ui/1.0/main.js'
				document.body.appendChild(script2)
			}.bind(this), 500)
		},
		methods: {
			initAMap() {
				map = new AMap.Map('container', {
					mapStyle: 'amap://styles/macaron',
					rotateEnable: false,
					zooms: [4, 18],
					center: [106, 34],
					zoom: 4
				})
			},
			updateAmap(newValue, oldValue, ownerInstance, instance) {
				if (newValue.type == '1') {
					if (distCluster != null) {
						map.clearMap()
						var a = map.getLayers()
						map.remove(a[1])
					}
					var a = []
					var b = []
					for (var i = 0; i < newValue.info.length; i++) {
						a.push(newValue.info[i].adCode)
						var c = newValue.info[i].assetList
						for (var j = 0; j < c.length; j++) {
							b.push(c[j])
						}
					}
					for (var i = 0; i < b.length; i++) {
						var d = b[i]
						var icon = new AMap.Icon({
							image: 'static/img/property/building.png',
							size: new AMap.Size(96, 102),
							imageSize: new AMap.Size(32, 34)
						})
						var marker = new AMap.Marker({
							icon: icon,
							position: new AMap.LngLat(parseFloat(d.lgt), parseFloat(d.lat)),
						})
						map.add(marker)
					}
					AMapUI.loadUI(['geo/DistrictCluster'], function(DistrictCluster) {
						distCluster = new DistrictCluster({
							map: map,
							autoSetFitView: false,
							topAdcodes: a,
							getPosition: function(item) {
								if (!item) {
									return null
								}
								return [parseFloat(item.lgt), parseFloat(item.lat)]
							},
							renderOptions: {
								getClusterMarker: function(feature, dataItems, recycledMarker) {
									if (dataItems.length != 0) {
										var j = 0
										var en = false
										for (var i = 0; i < newValue.moneyArray.length; i++) {
											if (newValue.moneyArray[i].adCode == feature.properties
												.adcode) {
												j = i
												en = true
											}
										}
										var content
										if (en) {
											content = `<div style='width:300px;background: #000000;opacity: 0.7;border-radius: 10px;padding-top: 20px;'>
														  <div style='font-size: 16px;font-weight: bold;color: #FFFFFF;border-left: 3px solid #FF7E00;padding: 0 20px;'>
															  ${feature.properties.name}
														  </div>
														  <div style='display: flex;padding: 5px 20px;'>
															  <div>
																  <div style='font-size: 19px;font-weight: 500;color:#FF7E00 ;'>${dataItems.length}</div>
																  <div style='font-size: 11px;color: #FFFFFF;'>区域资产数量</div>
															  </div>
															  <div style='margin-left: 15px;'>
																  <div style='font-size: 19px;font-weight: 500;color:#FF7E00 ;'>${newValue.moneyArray[j].totalRegisterPrice}元</div>
																  <div style='font-size: 11px;color: #FFFFFF;'>区域资产总价值(购入)</div>
															  </div>
														  </div>
														  <div style='font-size: 19px;font-weight: 500;color:#FF7E00 ;padding: 0px 20px;'>
															  ${newValue.moneyArray[j].totalFairPrice}元
														  </div>
														  <div style='font-size: 11px;color: #FFFFFF;padding: 0px 20px 20px 20px;'>
															  区域资产总价值(公允)
														  </div>
													  </div>`
										} else {
											content = `<div style='width:300px;background: #000000;opacity: 0.7;border-radius: 10px;padding-top: 20px;'>
														  <div style='font-size: 16px;font-weight: bold;color: #FFFFFF;border-left: 3px solid #FF7E00;padding: 0 20px;'>
															  ${feature.properties.name}
														  </div>
														  <div style='display: flex;padding: 5px 20px;'>
															  <div>
																  <div style='font-size: 19px;font-weight: 500;color:#FF7E00 ;'>${dataItems.length}</div>
																  <div style='font-size: 11px;color: #FFFFFF;'>区域资产数量</div>
															  </div>
														  </div>
													  </div>`
										}
										if (recycledMarker) {
											recycledMarker.setContent(content)
											return recycledMarker
										}
										return new AMap.Marker({
											content: content
										})
									} else {
										return null
									}
								},
								featureStyleByLevel: {
									province: {
										fillStyle: 'rgba(220, 220, 220, 1)',
										strokeStyle: 'rgba(170, 170, 170, 1)'
									},
									city: {
										fillStyle: 'rgba(220, 220, 220, 0.5)',
										strokeStyle: 'rgba(170, 170, 170, 1)'
									},
									district: {
										fillStyle: 'rgba(220, 220, 220, 0.1)',
										strokeStyle: 'rgba(170, 170, 170, 1)'
									}
								},
								getFeatureStyle: function(feature, dataItems) {
									if (dataItems.length == 0) {
										return {
											fillStyle: 'rgba(220, 220, 220, 0)',
											strokeStyle: 'rgba(170, 170, 170, 1)'
										}
									}
									return {}
								}
							}
						})
						distCluster.setData(b)
					})
				} else {
					map.setCenter(newValue.position)
					map.setZoom(18)
				}
			}
		}
	}
</script>

<style lang="scss">
	.homepage-view {
		height: calc(100vh - constant(safe-area-inset-bottom) - 94px - constant(safe-area-inset-top));
		height: calc(100vh - env(safe-area-inset-bottom) - 94px - env(safe-area-inset-top));
		background-color: #F8F8F8;
		position: relative;

		#container {
			width: 100%;
			height: 100%;
		}

		.homepage-top-view {
			top: 0;
			position: absolute;
			height: 80rpx;
			left: 0;
			right: 0;
			display: flex;
			align-items: center;
			background-color: #FFFFFF;

			.slot-content {
				background-color: #FFFFFF;
				padding: 24rpx;
				margin-left: 35rpx;
				margin-right: 35rpx;
				margin-top: 35rpx;
				border-radius: 10rpx;

				.item-box {
					margin-bottom: 50rpx;
					display: flex;
					flex-wrap: wrap;
					justify-content: flex-start;
				}

				.item {
					border: 1px solid $u-type-primary;
					color: $u-type-primary;
					padding: 8rpx 40rpx;
					border-radius: 10rpx;
					margin-top: 30rpx;
					margin-right: 30rpx;
				}

				.active {
					color: #FFFFFF;
					background-color: $u-type-primary;
				}

				.item-box-2 {
					margin-bottom: 50rpx;

					.item-box-more {
						display: flex;
						flex-wrap: wrap;
					}
				}

				.more-button {
					display: flex;

					.more-button-1 {
						flex-grow: 1;
						margin-right: 24rpx;
					}

					.more-button-2 {
						flex-grow: 1;
					}
				}
			}
		}

		.homepage-bottom-view {
			bottom: 0;
			position: absolute;
			display: flex;
			flex-direction: column;
			width: 100%;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			height: 100rpx;
			background-color: #FFFFFF;
			z-index: 99999;

			.homepage-bottom-top-view {
				height: 20rpx;
				margin-left: 20rpx;
				margin-right: 20rpx;
				display: flex;
				flex-shrink: 0;
				align-items: flex-end;
				justify-content: center;

				.homepage-bottom-top-center-view {
					width: 100rpx;
					height: 10rpx;
					border-radius: 10rpx;
					background-color: #D8D8D8;
				}
			}

			.homepage-swiper-view {
				flex: 1;
				height: 0rpx;
			}
		}
	}
</style>
